<template>
  <div class="table-sticky">
    <div class="table-box">
      表头sticky
      <el-table v-for="item in 10" :key="item" :data="tableData" border>
        <el-table-column prop="date" :label="'Date' + item" />
        <el-table-column prop="name" :label="'Name' + item" />
        <el-table-column prop="address" :label="'Address' + item" />
      </el-table>
    </div>
    <div class="table-box">
      虚拟滚动
      <virslScroll :data="dataList"></virslScroll>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import virslScroll from './component/virslScroll.vue'
const tableData = Array(30).fill(
  JSON.parse(
    JSON.stringify({
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    })
  )
)
const dataList = Array(3000)
  .fill(1)
  .map((_, i) => {
    return {
      index: i,
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    }
  })
</script>

<style lang="scss">
.table-sticky {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  overflow: hidden;
  height: 100%;
  .table-box {
    width: 50%;
    overflow: auto;
  }
  .el-table {
    overflow: initial; // 注意 这个很重要 sticky 的父组件中不可以有 overflow: hidden;
    margin-bottom: 15px;
    .el-table__header-wrapper {
      position: sticky;
      top: 0px;
      z-index: 5;
      .el-table__header {
        thead {
          tr {
            .el-table__cell {
              background-color: #f0f0f0;
            }
          }
        }
      }
    }
  }
}
</style>
